<template>
    <div style="width: 600px;height: 100%;margin: auto;">
        <div style="margin: auto;text-align: center;">
            <van-image width="200" height="200" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
                radius="20" /><br><br>
            <span style="color: rgb(5 117 230 / 80%);font-size: 20pt;">兔头（麻辣味）</span>
            <div
                style="width: 440px;height: 170px;margin: auto;text-align: center;border-radius: 15pt;box-shadow: 0,0,15px,red;margin-top: 10px;">
                <el-card style="max-width: 480px;border-radius: 25px">
                    <el-row :gutter="24">
                        <el-col :span="12" :offset="0">
                            <van-cell title="2024041001" label="生产批次"
                                style="color: rgb(5 117 230 / 80%);font-size: 14pt;" />
                            <van-cell title="CX30854677" label="生产许可证号"
                                style="color: rgb(5 117 230 / 80%);font-size: 14pt;" />
                        </el-col>
                        <el-col :span="12" :offset="0">
                            <van-cell title="60天" label="保质期" style="color: rgb(5 117 230 / 80%);font-size: 14pt;" />
                            <van-cell title="爱吃兔兔" label="生产企业"
                                style="color: rgb(5 117 230 / 80%);font-size: 14pt;" /></el-col>
                    </el-row>
                </el-card>
            </div><br>
            <div>
                <span style="margin-right: 350px">产品检验报告</span><br>
                <div style="margin-top: 15px">
                    <van-image width="130px" height="130px" style="margin-right: 30px;margin-left: 10px;"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" radius="20" />
                    <van-image width="130px" height="130px" style="margin-right: 30px;"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" radius="20" />
                    <van-image width="130px" height="130px" style="margin-right: 30px;"
                        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" radius="20" />
                </div>
            </div>
        </div>

        <!-- 导航栏 -->
        <div style="margin-top: 5px;">
            <van-tabs v-model:active="activeName">
                <van-tab title="养殖信息">
                    <CultivAtionApp></CultivAtionApp>
                </van-tab>
                <van-tab title="屠宰信息">
                    <SaugHtetrApp></SaugHtetrApp>
                </van-tab>
                <van-tab title="深加工信息">
                    <ProceSsingApp></ProceSsingApp>
                </van-tab>
            </van-tabs>
        </div>


    </div>




</template>

<script setup lang="ts">
import { ref } from 'vue'
import CultivAtionApp from './CultureMobileTerminal.vue'
import SaugHtetrApp from './SlaughterMobileTerminal.vue'
import ProceSsingApp from './DeppProcessingMobileTerminal.vue'

const activeName = ref('a');
</script>

<style></style>